<template>
  <a-modal v-model:visible="newAddCodeValue1" title="新增码表编码" :width="800" ok-text="确定" cancel-text="取消" @ok="handleOk()" @Cancel="handleCancel()">
    <!-- 表格数据 -->
    <div class="content">
      <div>码表选择:<a-select v-model.value="codeNames" :options="options"></a-select></div>
      <a-table :row-selection="props.status == 2 ? false : { selectedRowKeys: selectedRowKeys1, onChange: selectChangEtion }" :columns="columns" :data-source="data" :pagination="false">
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a>{{ text }}</a>
          </template>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { addList, modifyList } from '@/api/test/api';
  import { Ref } from 'vue';
  import tableComponent from '@/pages/component/tableComponent.vue';
  import { message } from 'ant-design-vue';
  const emit = defineEmits(['CloseIsAddCode']);
  const props = defineProps({
    dataList: {
      type: String,
      default: () => {
        return [];
      },
    },
    newAddCodeValue: {
      type: Boolean,
      default: false,
    },
    codeName: {
      type: String,
    },
    isSaved: {
      type: Boolean,
    },
    status: {
      type: Number,
    },
  });
  const isSaved1 = ref(true);
  const codeNames = ref('请选择');
  watch(
    () => props.newAddCodeValue,
    (nvalue: boolean) => {
      newAddCodeValue1.value = nvalue;
      isSaved1.value = props.isSaved;
    },
  );
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
  }
  // 码表状态下拉框数据
  const options = [
    { value: 1, label: '未发布' },
    { value: 2, label: '已发布' },
    { value: 3, label: '已停用' },
  ];
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];
  const data: DataType[] = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Disabled User',
      age: 99,
      address: 'Sidney No. 1 Lake Park',
    },
  ];
  let selectedRowKeys1: Ref<string[]> = ref([]);
  const selectChangEtion = (selectedRowKeys: string[], selectedRows: DataItem[]) => {
    selectedRowKeys1.value = selectedRowKeys;
    selectedRowKeys = [];
  };
  interface SmallModal {
    codesId: string;
    configsId: number;
    configsMsg: string;
    configsName: string;
  }
  // let { isSaved } = { ...props };
  interface FormState {
    codesId: string;
    codesName: string;
    codesMsg: string;
  }
  let formState = reactive<FormState>({
    codesId: '',
    codesName: '',
    codesMsg: '',
    // remember: true,
  });
  const newAddCodeValue1: Ref<boolean> = ref(false);
  const handleOk = () => {
    if (props.status == 1) {
      emit('CloseIsAddCode', 1); //状态为1 是新增码表取值 弹窗触发打开的
    } else if (props.status == 0) {
      emit('CloseIsAddCode', 0); //状态为0 是新增码表编码 弹窗触发打开的
    } else {
      emit('CloseIsAddCode', 2); //状态为0 是码表引用 弹窗触发打开的
    }
    newAddCodeValue1.value = false;
  };

  //调用新增弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('CloseIsAddCode', 0);
  };
  // 解除引用气泡框执行方法
  const confirm = (e: MouseEvent) => {
    console.log(e);
    message.success('Click on Yes');
  };
  // 解除引用气泡框取消方法
  const cancel = (e: MouseEvent) => {
    console.log(e);
    message.error('Click on No');
  };
</script>
<style lang="less" scoped></style>
